<template>
    <div class="km-collapse-item" is-show="{{attr.open}}">
        <div class="title" @click="onOpen">
            <svg t="1757318454718" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4520"
                width="32" height="32">
                <path d="M283.648 174.081l57.225-59.008 399.479 396.929-399.476 396.924-57.228-59.004 335.872-337.92z"
                    fill="#272636" p-id="4521"></path>
            </svg>
            <span>{{attr.title}}</span>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
    export default function() {
        let attr = this.reactive({
            title: '',
            open: ''
        })

        // 点击标题切换状态
        this.onOpen = () => {
            attr.open = (attr.open == "" ? "open" : "");
        }

        // 监听属性变化
        this.attred = (name, oldValue, newValue) => {
            if (typeof attr[name] != "undefined") {
                attr[name] = (newValue == "" ? name : newValue);
            }
        }  
    }
</script>
<style>
    .title {
        cursor: pointer;
        display: flex;
        align-items: flex-start;
    }

    .km-collapse-item .content {
        max-height: 0;
        overflow: hidden;
        transition: var(--transition);
    }

    .km-collapse-item[is-show="open"] .content {
        max-height: 1000px;
        padding-top: 10px;
    }

    .title span {
        margin-left: 3px;
    }

    .title svg {
        width: 16px;
        height: 16px;
        transition: var(--transition);
        transform: rotate(0deg);
    }

    .km-collapse-item[is-show="open"] .title svg {
        transform: rotate(90deg);
    }
</style>